<script lang="ts" setup>
import { computed } from "vue";
import { QMenu, QDate } from 'quasar'

import { getTime, toNumber } from "qqlx-cdk";

import { ComButton } from "../ComButton";

const emit = defineEmits<{
  (event: 'change', mills: number): void
}>();

const vueProps = defineProps<{
  title: string;
  time: number
}>();

const timeLabel = computed({
  get() {
    return getTime(toNumber(vueProps.time)).text_full;
  },
  set(value) {
    emit("change", new Date(value).getTime() + 1000 * 60 * 60 * 6);
  },
});
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
</script>

<template>
  <ComButton>
    <span v-if="vueProps.title">{{ vueProps.title }}：</span>
    <span>{{ timeLabel }}</span>
    <q-menu transition-show="jump-down" transition-hide="jump-up">
      <q-date flat minimal no-unset color="primary" first-day-of-week="1" v-model="timeLabel" />
    </q-menu>
  </ComButton>
</template>
